<template>
	<div class="login register">
		<div class="login_header">
			<div class="page-inner head">
				<div class="logo">
					<NuxtLink to="/"><img src="@/public/uploadfiles/logo.png" alt="" /></NuxtLink>
				</div>
				<span class="f24 font-b">AITEP</span>
			</div>
		</div>
		<div class="page-inner login_inner">
			<div class="wrap">
				<p class="f36 font-b">創建帳戶</p>
				<div class="login_box">
					<el-form :model="registerFprm" :rules="loginRules" ref="ruleFormRef">
						<el-form-item prop="username">
							<p class="font-r f16">用戶名</p>
							<el-input v-model="registerFprm.username" placeholder="請輸入您的用戶名" style="height: 75%" />
						</el-form-item>
						<el-form-item prop="email">
							<p class="font-r f16">郵箱</p>
							<el-input v-model="registerFprm.email" placeholder="請輸入您的郵箱地址" style="height: 75%" />
						</el-form-item>
						<el-form-item prop="code">
							<p class="font-r f16">驗證碼</p>
							<el-input v-model="registerFprm.code" placeholder="請輸入驗證碼" style="height: 75%">
								<template #append>
									<div class="gbtn">
										<div v-if="showText" class="t-c" @click="toGetCode()">获取</div>
										<div v-else class="t-c gray" style="color: #a7a7a7">{{ second }}s</div>
									</div>
								</template>
							</el-input>
						</el-form-item>
						<el-form-item prop="password">
							<p class="font-r f16">密碼</p>
							<el-input v-model="registerFprm.password" placeholder="請輸入您的密碼" style="height: 75%"
								show-password="true" />
						</el-form-item>
						<el-form-item prop="repassword">
							<p class="font-r f16">確認密碼</p>
							<el-input v-model="registerFprm.repassword" placeholder="請確認密碼" style="height: 75%"
								show-password="true" />
						</el-form-item>
						<el-form-item>
							<p class="font-r f16">公司驗證</p>
							<div class="f16" style="width: 100%; text-align: left" v-if="registerFprm.company">
								{{ registerFprm.company }}
							</div>
							<div class="company_btn f16 font-medium" @click="
                  {
                    dialogShow = true;
                  }
                ">
								去驗證<img src="/images/add.png" />
							</div>
						</el-form-item>
						<el-form-item>
							<el-checkbox style="margin-right: 10px" v-model="isAgree" size="large" />
							<NuxtLink :to="dataInfo.link1" class="">{{
                dataInfo.text1
              }}</NuxtLink>
						</el-form-item>
						<el-form-item>
							<div class="form_btn f18 font-m" @click="toRegister">注册</div>
						</el-form-item>
						<el-form-item>
							<div class="flex extras font-r">
								<p>
									已經有一個帳戶,
									<NuxtLink to="/login" class="register">登入</NuxtLink>
								</p>
							</div>
						</el-form-item>
					</el-form>
				</div>
			</div>
			<p class="copyright font-r f16" v-html="copyrightInfo.content"></p>
		</div>
		<!-- 弹出框 -->
		<el-dialog v-model="dialogShow">
			<el-form v-model="dialogForm">
				<el-form-item>
					<p class="font-r f16">公司名稱</p>
					<el-input v-model="registerFprm.company" placeholder="請輸入公司名稱" style="height: 75%" />
				</el-form-item>
				<el-form-item>
					<p class="font-r f16">職位</p>
					<el-input v-model="registerFprm.position" placeholder="請輸入職位" style="height: 75%" />
				</el-form-item>
				<el-form-item>
					<p class="font-r f16">公司驗證</p>
					<div class="company">
						<el-upload ref="upload" class="upload-demo"
							action="http://h9.gzwhir.com:1999/api/user/uploadimage" :limit="1"
							:on-success="handleSuccess" :auto-upload="true">
							<template #trigger>
								<div>
									<div class="add_w"><img src="/images/add_w.png" /></div>
									<p>上傳營業執照</p>
								</div>
							</template>
						</el-upload>
					</div>
					<div style="margin-top: 1px; color: red;">请上传jpg,jpeg,png格式的文件</div>
				</el-form-item>
				<el-form-item>
					<div class="form_btn f18 font-m confirm_btn" @click="toCompny">
						確認
					</div>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>
<script>
	import {
		ElMessage
	} from "element-plus";
	import {
		userRegister,
		getArticleIinfo,
		emsSend,
		getArticleLists,
	} from "@/api/sections";
	export default {
		async setup() {
			const userStore = useUserStore();
			userStore.loginPage();
			return {
				userStore
			};
		},
		data() {
			return {
				copyrightInfo: {},
				isAgree: false,
				registerFprm: {
					username: "",
					email: "",
					password: "",
					repassword: "",
					code: "",
					company: "",
					position: "",
					license: "",
				},
				dataInfo: {},
				second: 120,
				showText: true, //判断短信是否发送
				dialogShow: false,
				dialogForm: {},
				loginRules: {
					username: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					email: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					password: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					repassword: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
					code: [{
						required: true,
						message: "",
						trigger: "blur",
					}, ],
				},
			};
		},

		methods: {
			toCompny() {

				if (!this.registerFprm.company) {
					ElMessage({
						message: "請輸入公司名稱",
						type: "warning",
					});
					return;
				}
				if (!this.registerFprm.position) {
					ElMessage({
						message: "請輸入職位",
						type: "warning",
					});
					return;
				}
				if (!this.registerFprm.license) {
					ElMessage({
						message: "請上傳營業執照",
						type: "warning",
					});
					return;
				}
				this.dialogShow = false
			},
			toGetCode() {
				emsSend({
					email: this.registerFprm.email,
					event: "register",
				}).then((res) => {
					if (res.code == 1) {
						ElMessage({
							message: res.msg,
							type: "success",
						});

						var interval = setInterval(() => {
							this.showText = false;
							var times = this.second - 1;
							this.second = times;
						}, 1000);
						setTimeout(() => {
							clearInterval(interval);
							this.second = 60;
							this.showText = true;
						}, 60000);
					} else {
						ElMessage({
							message: res.msg,
							type: "error",
						});
					}
				});
			},
			handleSuccess(res) {
				if (res.code == 1) {
					this.registerFprm.license = res.data.fullurl;
				}
				console.log(e, 12212);
			},
			toRegister() {
				this.$refs.ruleFormRef.validate((valid) => {
					if (valid) {
						if (!this.isAgree) {
							ElMessage({
								message: "請同意Ngteco的隱私權聲明",
								type: "warning",
							});
							return;
						}
						
						
						if (!this.registerFprm.company) {
							ElMessage({
								message: "請輸入公司名稱",
								type: "warning",
							});
							return;
						}
						if (!this.registerFprm.position) {
							ElMessage({
								message: "請輸入職位",
								type: "warning",
							});
							return;
						}
						if (!this.registerFprm.license) {
							ElMessage({
								message: "請上傳營業執照",
								type: "warning",
							});
							return;
						}
						
						if(this.$route.query.platform){
							this.registerFprm.platform=this.$route.query.platform
						}

						userRegister(this.registerFprm).then((res) => {
							if (res.code == 1) {
								ElMessage({
									message: res.msg,
									type: "success",
								});
								
								res.data.userinfo.token=res.data.token
								localStorage.setItem(
								  "userinfo",
								  JSON.stringify(res.data.userinfo)
								);
								this.$router.push({
									path: `/`,
								});
							} else {
								ElMessage({
									message: res.msg,
									type: "error",
								});
							}
						});
					} else {
						return false;
					}
				});
			},
		},
		mounted: function() {
			getArticleIinfo({
				id: 744
			}).then((res) => {
				console.log(res, 1111);
				this.dataInfo = res.data;
			});
			getArticleLists({
				cid: 303,
				ext: "content"
			}).then((res) => {
				this.copyrightInfo = res.data[0];
			});
		},
	};
</script>
<style scoped>
 
  .login{
      height: auto;
      background: url('./images/loginbg.jpg') no-repeat center;
      background-size: cover;
  }
  .login .login_header{
      flex: 0 0 auto;
      width: 100%;
      background: #fff;
  }
  .login .login_inner{
      
      display: flex;
      min-height: 100vh;
      flex-direction: column;
      padding: 100px 0 30px;
      align-items: center;
      justify-content: space-between;
  }
  .login .copyright{
      position: static;
      margin-top: 30px;
      transform: none;
      flex: 0 0 auto;
      width: 100%;
  }
  .login .wrap{
      width: 500px;
      max-width: 100%;
      margin-top: 5%;
      border-radius: 30px;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
  }
  @media(max-width:1024px){
      .login .login_inner{
          padding: 30px 0;
          min-height: calc(100vh - 100px);
      }
      .login .wrap{
          padding: 30px;
          margin-top: 0;
      }
      .login .extras {
  display: block;
  line-height: 1.8;
}
  }
</style>